<template>
<!--  template元素的直系儿子元素只能有一个-->
  <div class="index-container">
<!--    header开始-->
    <div class="header">
        <button class="login-btn" @click="goTo()">登录</button>
    </div>
<!--    header结束-->
<!--    banner区域开始-->
    <div class="banner">
      <div class="w">
        <h1>趣莘编程</h1>
        <button class="begin-btn">开始学习</button>
      </div>
    </div>
<!--    banner区域结束-->
<!--    课程特色开始-->
    <div class="feature">
      <div class="w">
        <h1>- 课程特色 -</h1>
        <ul>
          <li>
            <div class="feature_img">
              <img src="@/assets/images/course1.png">
            </div>
            <h3>交互式课堂</h3>
          </li>
          <li>
            <div class="feature_img">
              <img src="@/assets/images/course2.jpg">
            </div>
            <h3>趣味性课堂</h3>
          </li>
          <li>
            <div class="feature_img">
              <img src="@/assets/images/course3.jpg">
            </div>
            <h3>个性化课堂</h3>
          </li>
          <li>
            <div class="feature_img">
              <img src="@/assets/images/course4.jpg">
            </div>
            <h3>挑战性课堂</h3>
          </li>

        </ul>
      </div>
    </div>
<!--    课程特色结束-->
<!--    可学课程展示开始-->
    <div class="course">
      <div class="img-1">
        <img src="@/assets/images/arc_1.png" alt="" >
      </div>
      <div class="w">
        <h1>-可学课程-</h1>
        <div class="show">
          <div class="search">
            <input type="text" class="search" placeholder="热门课程" />
          </div>
          <ul>
            <li class="clearfix">
              <div class="cover">
                <img src="@/assets/images/pythonImage.png"/>
              </div>
              <div class="course-info">
                  <div class="hd">
                    <h2>Python基础语法</h2>
                    <span>编程基础</span>
                  </div>
                  <div class="info-list">
                    <ul>
                      <li>全面学习Python编写所需语法</li>
                      <li>快速掌握编程思维和编写技巧</li>
                      <li>开始你的第一行人工智能代码</li>
                    </ul>
                  </div>
              </div>
              <el-button class="begin-btn">开始学习</el-button>
            </li>

            <li class="clearfix">
              <div class="cover">
                <img src="@/assets/images/pythonImage.png"/>
              </div>
              <div class="course-info">
                <div class="hd">
                  <h2>Python基础语法</h2>
                  <span>编程基础</span>
                </div>
                <div class="info-list">
                  <ul>
                    <li>全面学习Python编写所需语法</li>
                    <li>快速掌握编程思维和编写技巧</li>
                    <li>开始你的第一行人工智能代码</li>
                  </ul>
                </div>
              </div>
              <el-button class="begin-btn">开始学习</el-button>
            </li>

          </ul>
        </div>
      </div>
    </div>
<!--    可学课程展示结束-->
<!--    footer开始-->
    <div class="footer">
      <div class="w">
        <h3>关于我们&nbsp;隐私政策</h3>
        <p>联系我们 I 地址：深圳市龙岗区坂田街道永香路创汇国际中心808 电子邮箱：XXXX@XXXXXXX.cn 客服：8888888</p>
      </div>
    </div>
<!--    footer结束-->
  </div>
</template>

<script>

export default {
  data() {
    return {
    };
  },
  computed: {},
  created() {},
  mounted() {},
  filters: {},
  methods: {
    goTo(){
      this.$router.push('/user');
    }
  },
  watch: {},
};
</script>
<!--通过此方式引入外部css文件可以解决页面样式污染的问题-->
<!--首页样式-->
<style src="@/assets/css/index.css"  scoped></style>
<style scoped>
/*基础样式*/
@import "@/assets/css/base.css";
/*公共样式*/
@import "@/assets/css/common.css";
</style>




